<!DOCTYPE html>
<!--[if lt IE 9]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->

  <head>
    {% include head.html %}
  </head>

  <body class="page-{{ page.title | slugify }}">

  	{% include navbar.html %}

    <aside class="sidenav">
      {% if page.category == 'UI components' or page.title == 'UI components' %}
        {% include sidenav/ui-components.html %}
      {% elsif page.category == 'Getting started' or page.title == 'Getting started' %}
        {% include sidenav/getting-started.html %}
      {% elsif page.category == 'About our work' or page.title == 'About our work' %}
        {% include sidenav/about-our-work.html %}
      {% endif %}
    </aside>
    {% include sidenav/mobile.html %}

    <div class="main-content" id="main-content">
      <div class="styleguide-content usa-content">
        <header>
          {% if page.category != null %}
            {% unless page.path contains 'overview' %}
              <p class="site-subheading">{{ page.category }}</p>
            {% endunless %}
          {% endif %}
          <h1 id="{{ page.title | slugify }}">{{ page.title }}</h1>
          {% if page.category == 'UI components' and page.maturity != null %}
            <div class="tooltip">
              <p class="tooltip-text" id="tooltip-text-{{ page.title | slugify }}">Read about the component maturity scale</p>
              <a class="usa-label label-{{ page.maturity }}" href="{{ site.baseurl }}/about-our-work/component-maturity-scale/" aria-describedby="tooltip-text-{{ page.title | slugify }}">
                {{ page.maturity }}
              </a>
            </div>
          {% endif %}
        </header>
        {% if page.lead != null %}
          <p class="usa-font-lead">{{ page.lead }}</p>
        {% endif %}
        {{ content }}
      </div>

      <footer class="site-footer" role="contentinfo">
        <div class="site-footer-nav usa-grid">
          {% if page.url == '/' %}
            {% include download-buttons.html %}
          {% endif %}
          {% if page.category != null %}
            <h6>{{ page.category }}</h6>
          {% endif %}
          {% if page.category == 'UI components' or page.title == 'UI components' %}
            {% include sidenav/ui-components.html %}
          {% elsif page.category == 'Getting started' or page.title == 'Getting started' %}
            {% include sidenav/getting-started.html %}
          {% elsif page.category == 'About our work' or page.title == 'About our work' %}
            {% include sidenav/about-our-work.html %}
          {% endif %}
        </div>
        <div class="site-footer-info">
          {% include footer.html %}
        </div>
      </footer>
    </div>

    {% include ie-polyfill-scripts.html %}
    {% include analytics.html %}
    {% include docs-scripts.html %}
    <script src="{{ site.baseurl }}/assets/js/vendor/uswds.min.js"></script>

  </body>

</html>
